{% extends 'base.html' %}

{% block title %}
  注册
{% endblock %}

{% block head %}
  <link rel="stylesheet" href="{% static 'css/auth.css' %}">
  <script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
  <script src="{% static 'js/register.js' %}"></script>
{% endblock %}

{% block main %}
  <div class="auth-container">
    <div class="auth-card">
      <div class="auth-header">
        <h2>创建账号</h2>
        <p>加入我们的技术社区</p>
      </div>

      <form action="" method="POST" class="auth-form">
        {% csrf_token %}
        <div class="form-group">
          <label for="register-name">用户名</label>
          <div class="input-with-icon">
            <i class="fas fa-user"></i>
            <input type="text" name="username" placeholder="设置您的用户名" value="{{ form.username.value|default_if_none:'' }}" required>
          </div>
        </div>

        <div class="form-group">
          <label for="register-email">电子邮箱</label>
          <div class="email-input-group">
            <div class="input-with-icon">
              <i class="fas fa-envelope"></i>
              <input type="email" placeholder="your@email.com" name='email' value="{{ form.email.value|default_if_none:'' }}" required>
            </div>
            <button type="button" class="btn btn-verify" id="captcha-btn">发送验证码</button>
          </div>
        </div>

        <div class="form-group">
          <label for="register-code">验证码</label>
          <div class="code-input-group">
            <div class="input-with-icon">
              <i class="fas fa-shield-alt"></i>
              <input type="text" name="captcha" placeholder="请输入验证码" required>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label for="register-password">密码</label>
          <div class="input-with-icon">
            <i class="fas fa-lock"></i>
            <input type="password" name="password" placeholder="请输入密码" required>
          </div>
        </div>
        <button type="submit" class="btn btn-primary" style="width: 500px">注册账号</button>

        <div class="auth-footer">
          已有账号? <a href="{% url 'myauth:login' %}">立即登录</a>
        </div>
      </form>
    </div>
  </div>

{% endblock %}

